.history-card {
  position: relative;
  width: 630rpx;
  height: 200rpx;
  margin: 25rpx 60rpx;
  border-radius: 10rpx;
  box-shadow: 6rpx 6rpx 20rpx gray;
  background: rgba(#fff, 0.8);

  .history-card-portrait {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 30rpx;
    width: 160rpx;
    height: 160rpx;
    border: 1rpx solid gray;
    border-radius: 50%;
    overflow: hidden;
  }

  .history-card-name {
    position: absolute;
    left: 250rpx;
    top: 52rpx
  }

  .history-card-visited {
    position: absolute;
    top: 0;
    right: 150rpx;
    padding: 0 16rpx;
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
    background-color: rgba($color: #cc0, $alpha: 0.5);
    font-size: smaller;
    color: white;
  }

  .history-card-score-title {
    position: absolute;
    left: 260rpx;
    bottom: 64rpx;
    font-size: 24rpx;
  }

  .history-card-score {
    position: absolute;
    left: 250rpx;
    bottom: 40rpx;
  }

  .history-card-state {
    position: absolute;
    top: 0;
    right: 40rpx;
    padding: 0 16rpx;
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
    color: white;
    font-size: smaller;
  }
}